<template>
  <div class="map-container">
    <div class="map-wrap" id="mychart" ref="mapWrap"></div>
    <!-- <div class="layer-wrap" v-if="isOpen">
      <div class="tit">
        <img :src="icon" alt="" class="pic">
        <div class="city">{{ cityName }}</div>
        <div class="icon-close" @click="closeWin()">x</div>
      </div>
      <div class="user-info">
        <div class="num">ETC套装用户量</div>

      </div>
      <div class="user-num">
        <div class="num">{{ etcNum }}</div>
        <div class="unit">个</div>
      </div>
      <div class="compare">
        <div>较前一日</div>
      </div>
      <div class="num before-num">{{ preDayCnt }}</div>
     
    </div> -->
  </div>

</template>

<script>
import * as echarts from 'echarts'
import geoJson from '@/api/anhui'
import demo1 from "@/assets/images/demo1.png";
import demo2 from "@/assets/images/demo2.png";
// import { getCityIssueInfo } from '@/api/statistics/screen'
export default {
  name: 'etcCityMap',
  data() {
    return {
      chart: null,
      options: {},
      chartData: [],
      userList: [
        {
          name: '机动车保有量',
          num: '',
          unit: '万'
        },
        {
          name: '发行率',
          num: '',
          unit: ''
        },
        {
          name: '目标用户',
          num: '',
          unit: '万'
        },
        {
          name: '流失用户',
          num: '',
          unit: '万'
        }
      ],
      isOpen: true,
      cityCode: '340100',
      cityName: '合肥市',
      preDayCnt: '',
      etcNum: '',
      icon: require('@/assets/images/excel.png')
    }
  },
  methods: {
    closeWin() {
      this.isOpen = false
    },
    getCityMapData(cityCode) {
      const cityParams = {
        cityCode: cityCode
      }
      this.initMap(this.chartData)
      // getCityIssueInfo(cityParams)
      // 	.then((res) => {
      // 		if (res.code == 200) {
      // 			this.cityName = res.data[0].cityName
      // 			this.preDayCnt = res.data[0].preDayCnt
      // 			this.etcNum = res.data[0].cnt
      // 			this.chartData = res.data || []
      // 			this.initMap(this.chartData)
      // 			this.userList[0].num = res.data[0].highWayVehicle
      // 			this.userList[1].num = res.data[0].issueRate
      // 			this.userList[2].num = res.data[0].targetUser
      // 			this.userList[3].num = res.data[0].lostUser

      // 		}
      // 	})
      // 	.finally(() => {
      // 	})
    },
    initMap(chartData) {
      let tempData1 = [
        {
          name: "合肥市",
          value: [116.283042, 31.86119],
          num: 7.7,
        },
      ];
      let tempData2 = [
        {
          name: "安庆市",
          value: [117.053571, 30.524816],
          num: 7.7,
        },
      ];
      let tempData3 = [
        {
          name: "芜湖",
          value: [116.385521, 31.351772],
          num: 7.7,
        },
      ];
      this.chart = echarts.init(this.$refs.mapWrap)
      let that = this;
      let option = {
        // 背景颜色
        backgroundColor: '',
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          formatter: function (e) {
            console.log("eee:", e)
            var name = e.name ? e.name : '获取中'
            // if(that.cityName == e.name){
            // 	return false
            // }
            // 逻辑控制
            geoJson.features.forEach(item => {
              if (item.properties.name === name) {
                console.log('item.properties.adcode:', item.properties.adcode)
                // 点取位置的adcode
                that.cityCode = item.properties.adcode
                that.cityName = name
                that.isOpen = true
                that.getCityMapData(that.cityCode)
              }
            })
          },
        },
        geo: {
          map: "anhui",
          show: false,
          roam: false,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#00091a",
              borderColor: "#00091a", //线
              shadowColor: "#00091a", //外发光
              shadowBlur: 20,
            },
            emphasis: {
              areaColor: "#3A63BC", //悬浮区背景
            },
          },
        },
        series: [
          {
            name: '车流量',
            type: 'map', //图表类型
            mapType: 'anhui',
            roam: false,
            top: '8%',
            zoom: 1.2,
            x: '30%',
            selectedMode: 'single', //multiple多选
            label: {
              normal: {
                color: 'rgba(255,255,255,0.8)',
                formatter: '{b}',
                position: [-12, -1],
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#164091',
                borderWidth: 2,//设置外层边框
                borderColor: '#9ffcff',
              }
            },
            data: chartData,
            zlevel: 0,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            // symbol: "image://" + demo1,
            legendHoverLink: true,
            symbolSize: [0, 0],
            // legendHoverLink: true,
            label: {
              show: true,
              offset: [0, -20], //偏移设置
              fontSize: 12,
              lineHeight: 16,
              borderWidth: 1,
              backgroundColor: '#061a4c',
              borderColor: "#2BD8FB",
              padding: [8, 10],
              formatter: (value)=> {
                return value.data.name + '：' + value.data.value[2] + '人'
              },
              rich: {
                name: {
                  fontWeight: "bold",
                  fontSize: 12,
                  color: "#fff",
                },
                pt: {
                  fontSize: 12,
                  color: "#2BD8FB",
                },
                date: {
                  color: "rgb(255,255,255,0.8)",
                },
              },
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#D8BC37", //标志颜色
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            data: tempData1,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },{
            type: "scatter",
            coordinateSystem: "geo",
            // symbol: "image://" + demo1,
            legendHoverLink: true,
            symbolSize: [0, 0],
            // legendHoverLink: true,
            label: {
              show: true,
              offset: [0, -20], //偏移设置
              fontSize: 12,
              lineHeight: 16,
              borderWidth: 1,
              backgroundColor: '#061a4c',
              borderColor: "#2BD8FB",
              padding: [8, 10],
              formatter: (value)=> {
                return value.data.name + '：\n' + value.data.value[2] + '人'
              },
              rich: {
                name: {
                  fontWeight: "bold",
                  fontSize: 12,
                  color: "#fff",
                },
                num: {
                  fontSize: 12,
                  color: "#2BD8FB",
                },

              },
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#D8BC37", //标志颜色
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            data: tempData2,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            // symbol: "image://" + demo1,
            legendHoverLink: true,
            symbolSize: [0, 0],
            // legendHoverLink: true,
            label: {
              show: true,
              offset: [0, -20], //偏移设置
              fontSize: 12,
              lineHeight: 16,
              borderWidth: 1,
              backgroundColor: '#061a4c',
              borderColor: "#2BD8FB",
              padding: [8, 10],
              formatter: (value)=> {
                return value.data.name + '：' + value.data.value[2] + '人'
              },
              rich: {
                name: {
                  fontWeight: "bold",
                  fontSize: 12,
                  color: "#fff",
                },
                pt: {
                  fontSize: 12,
                  color: "#2BD8FB",
                },
                date: {
                  color: "rgb(255,255,255,0.8)",
                },
              },
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#D8BC37", //标志颜色
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            data: tempData3,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
        ],
      }
      // 设置合肥市城市选中
      // let index = chartData.findIndex((item) => item.cityName == '合肥市')
      // console.log('index::',index)
      // chartData[index].selected = true
      echarts.registerMap('anhui', geoJson) // 绘制中国地图
      this.chart.setOption(option)
      // 设置合肥市默认选中
      // this.chart.dispatchAction({
      // 	type: 'showTip',
      // 	seriesIndex: index, // 针对series下第几个数据
      // 	dataIndex: index, // 第几个数据
      // })
    },
    // 重新加载地图
    reloadMap() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
      this.initMap(this.chartData)
    },
  },
  mounted() {
    this.getCityMapData(this.cityCode)
    window.addEventListener('resize', () => {
      this.reloadMap()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>
#mychart {
  height: 600px;
}

.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-position: center bottom;

  .map-wrap {
    width: 100%;
    height: 100%;
  }

  .layer-wrap {
    position: absolute;
    left: 40%;
    top: 20%;

    background-size: 100% 100%;
    width: 250px;
    height: 260px;
    padding: 20px 15px;
    box-sizing: border-box;

    .tit {
      width: 100%;
      height: 40px;
      line-height: 32px;
      display: flex;
      // justify-content: space-between;
      color: #fff;

      .pic {
        height: 28px;
        width: 32px;
      }

      .city {
        font-size: 20px;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        color: #FFFFFF;
        line-height: 26px;
        padding-left: 6px;

        // background: linear-gradient(0deg, rgba(0,144,255,0.43) 0%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }

      .icon-close {
        font-size: 20px;
        position: absolute;
        right: 20px;
        top: 15px;
        cursor: pointer;
        color: #87a9ff;
      }
    }

    .user-info {
      width: 100%;
      line-height: 24px;
      font-size: 14px;
      color: #ABE6FF;
      display: flex;
      background: linear-gradient(to right, rgba(0, 133, 209, 0.4) 0%, rgba(32, 182, 249, 1) 0%, rgba(15, 97, 166, 1) 0%, rgba(15, 97, 166, 0) 100%);
      position: relative;

      .num {
        padding: 5px 0px 5px 5px;
      }

      .num::before {
        content: '';
        width: 2px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #2dcce9;
      }
    }

    .user-num {
      height: 50px;
      line-height: 50px;
      color: #fff;
      display: flex;


      .num {
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 5px;
        padding-left: 10px;
      }


      .unit {
        font-size: 14px;
        opacity: 0.5;
        margin-left: 10px;
        line-height: 45px;
      }
    }

    .user-list {
      width: 100%;

      .item {
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        color: #fff;
        display: flex;

        .name {
          width: 90px;
        }

        .num {
          margin-left: 15px;
        }
      }
    }
  }
}

.before-num {
  color: #3AFF97 !important;
  font-size: 30px;
  padding-left: 10px;
  height: 50px !important;
  line-height: 50px !important;
}

.compare {
  padding: 5px 0px 5px 5px;
  background: linear-gradient(to right, rgba(0, 133, 209, 0.4) 0%, rgba(32, 182, 249, 1) 0%, rgba(15, 97, 166, 1) 0%, rgba(15, 97, 166, 0) 100%);
  position: relative;
  line-height: 24px;
  font-size: 14px;
  color: #ABE6FF;

  div::before {
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #2dcce9;
  }
}
</style>